<template>
  <el-dialog
    class="public-dialog"
    :title="id ? '编辑' : '新增'"
    width="80%"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <div class="h-[700px]">
      <payment-info
        :data="formvalue"
        ref="baseRef"
        :paymenFlage="paymenFlage"
      />
      <detail-info v-if="id" :data="formvalue" ref="detailInfoRef" />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
          :disabled="paymenFlage"
        >
          保存
        </el-button>
        <el-button
          v-if="paymenFlage"
          size="large"
          type="primary"
          @click="handlePaymen"
          :loading="loading"
        >
          标记付款
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import paymentInfo from "./paymentInfo/index.vue";
import detailInfo from "./detailInfo/index.vue";
import {
  addLogisticsPayOrder,
  updateLogisticsPayOrder,
  detailLogisticsPayOrder,
  payLogisticsPayOrder,
} from "../api/index";
const route = useRoute();

const props = defineProps({
  id: { type: [Number, String], default: "" },
  modelValue: { type: Boolean, default: false },
  optionsData: { type: Object, default: () => ({}) },
  type: { type: String, default: "" },
});
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const formvalue = ref({ id: null});
const loading = ref(false);
const disabled = ref(false);
const baseRef = ref();
const { type, id } = toRefs(props);
const paymenFlage = computed(() => {
  if (type.value == "payment") {
    return true;
  }
  return false;
});
watch(
  () => id.value,
  (val) => {
    if (val) {
      nextTick(() => {
        getDetail();
      });
    }
  }
);
const getDetail = () => {
  detailLogisticsPayOrder({ id: id.value }).then((res) => {
    formvalue.value = res?.data || {};
  });
};
const detailInfoRef = ref();
const handleSave = async () => {
  try {
    loading.value = true;
    const baseInfo = await baseRef.value?.submit();
    const detailInfo = await detailInfoRef?.value?.tableDataAll();
    const isValid = detailInfo.every(
      (item) =>
        item.receive_account_name &&
        item.receive_account_number &&
        item.opening_bank
    );
    if (!isValid)
      return ElMessage.warning(
        "明细信息中的'收款账户名','收款账号','开户行'不能为空!"
      );
    baseInfo.details = detailInfo;
    const _api = {
      edit: updateLogisticsPayOrder,
      add: addLogisticsPayOrder,
    };
    if (!baseInfo?.id) {
      baseInfo.id = undefined;
    }
    const res = await _api[baseInfo?.id ? "edit" : "add"]({
      ...baseInfo,
    });
    if (res.code !== 200) {
      ElMessage.warning(res.message);
      return;
    }
    ElMessage.success("保存成功");
    handleClose(true);
  } catch (e) {
    if (e?.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handlePaymen = async () => {
  try {
    loading.value = true;
    const baseInfo = await baseRef.value?.submitPaymen();
    const { id, pay_receipts, pay_total_amount, pay_account } = baseInfo;
    const res = await payLogisticsPayOrder({
      id,
      pay_receipts,
      pay_total_amount,
      pay_account,
    });
    if (res.code !== 200) {
      ElMessage.warning(res.message);
      return;
    }
    ElMessage.success("保存成功");
    handleClose(true);
  } catch (e) {
    if (e?.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  formvalue.value = {};
  await nextTick();
  baseRef.value.resetForm();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>

<style lang="scss" scoped></style>
